<template>
  <div class="container-xl my-home-div" :style="{ '--my-home-div-height': '56px' }">
    <div class="row my-home-div-line ">
      <div class="col p-0">
        <i class="icon  icon-ic_fluent_people_team_28_filled"></i> 团队成员
        <span class="name">（创建者：{{ data?.user?.name }}）</span>
      </div>
      <div class="col text-right">
        <span class="span text-danger" @click="delteamuser">退出团队</span>
      </div>
    </div>
    <div class="row border" v-if="group.length" v-for="(v, k) in group" :key="'=' + k" :style="{ '--bs-gutter-x': 0 }">
      <div class="col p-0">
        <div class="col-12 wfz1">{{ v.name }}</div>
        <el-row class="el-row">
          <el-col v-for="t in v.teamuser" :key="t.ID" :span="3">
            <el-popover placement="top" :width="180" trigger="hover">
              <template #reference>
                <div class="div-popover">
                  <router-link v-slot="{ navigate }" custom :to="{
                    name: '用户',
                    query: { userid: t?.userid },
                  }">
                    <el-avatar @click="navigate" :size="48" class="el-avatar" :src="t.user?.headportrait"></el-avatar>
                  </router-link>
                  <router-link v-slot="{ navigate }" custom :to="{
                    name: '用户',
                    query: { userid: t?.userid },
                  }">
                    <div @click="navigate" class="el-button-text div">{{ t.user?.name }} {{ t.user?.xingming ?
                      t.user?.name
                        ===
                        t.user?.xingming ? '' : `(${t.user?.xingming})` : '' }}
                    </div>
                  </router-link>
                </div>
              </template>
              <div class="body-popover">
                <el-button size="small" @click="$router.push({
                  name: '用户',
                  query: { userid: t?.userid },
                })">查看详情</el-button>
                <el-button size="small" v-if="isAdmin" type="primary"
                  @click="teamresetpassword({ ID: Number(t?.user?.ID), teamid: Number(data?.ID) })">重置密码</el-button>
              </div>
            </el-popover>
          </el-col>
        </el-row>
      </div>
      <br />
    </div>
    <el-empty v-if="!group.length" image="https://cdn.hterobot.com/JOY/oj_1_1/Not%20Found%20illustration.png" />

  </div>
</template>

<script setup lang="ts">
import { asyncteamdelteamuser, asyncteamresetpassword } from "../../../api";
import { ElMessageBox, ElMessage } from "element-plus";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { computed, } from "vue";
import { badgeType } from "./type";
interface PU {
  data?: Studycodemodel.Iteam,
  changeteam?: (str: Studycodemodel.Iteam) => void,
  isAdmin?: 0 | 1 | 2
  user?: Studycodemodel.Iuser
  teamusers?: Studycodemodel.Iteamuser[]
  getUsers?: Function
  badge?: badgeType
}

const p = defineProps<PU>()

const group = computed(() => {
  const t = p.data;
  let n: Studycodemodel.Iteamusergroup[] = [];
  if (t) {
    const g = t.teamusergroup || [];

    n = g.map((e) => {
      let teamuser: Studycodemodel.Iteamuser[] = [];
      if (p.teamusers) {
        teamuser = p.teamusers.filter((v) => v.teamusergroupid === e.ID);
      }
      return {
        ...e,
        teamuser,
        name: "分组：" + e.name,
      };
    });
  }
  const o: Studycodemodel.Iteamusergroup = {
    name: "未分组",
    teamuser:
      p.teamusers?.filter(
        (e) => e.jurisdiction === "0" && !e.teamusergroupid
      ) || [],
  };
  if (o.teamuser?.length) {
    return [o].concat(n);
  } else {
    return n
  }
});

const admins = computed(() => {
  const d = p.teamusers?.filter((e) => e.isAdmin === 1) || [];
  return [{ ...p.data?.user }].concat(d);
});

async function delteamuser() {
  ElMessageBox.confirm("确定要退出此团队吗", "删除", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (p.data?.user?.ID === p.user?.ID && p.data?.ID) {
        ElMessage.error("你是团队创建者无法退出");
        return;
      }
      const t = p.teamusers?.find((v) => v.userid === p.user?.ID);
      if (t && t.ID && p.data?.ID) {
        await asyncteamdelteamuser({ ID: t.ID, teamid: p.data.ID });
        ElMessage.success("退出成功");
        location.href = "/";
      }
    })
    .catch((e: any) => {
      console.log(e);
    });
}


async function teamresetpassword(body: { ID: number, teamid: number }) {
  asyncteamresetpassword(body).then(() => {
    ElMessage.success("密码已被重置为“000000”");
  }).catch(f => {
    ElMessage.error(f);

  })
}

</script>

<style scoped>
.span {
  cursor: pointer;
  font-weight: 400;
  margin-left: 12px;
}

.h5 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.wfz1 {
  font-weight: 600;
  background-color: #F5F5F5;
  padding: 12px;
}

.el-avatar {
  border: 1px solid rgba(117, 117, 117, 0.4);
  /* Depth 8 */
  width: 48px;
  height: 48px;
  display: inline-flex;
  filter: drop-shadow(0px 0.6px 1.8px rgba(0, 0, 0, 0.1)) drop-shadow(0px 3.2px 7.2px rgba(0, 0, 0, 0.13));
  transition: all 0.3s;
  cursor: pointer;
}

.el-avatar:hover {
  filter: drop-shadow(0px 0.6px 1.8px rgba(0, 0, 0, 0.5)) drop-shadow(0px 3.2px 7.2px rgba(0, 0, 0, 0.5));
}

.my-home-div-line {
  margin-bottom: 12px;
}

.el-button-text {
  cursor: pointer;
}

.el-button-text:hover {
  color: var(--color-cheng);
}

.border {
  background: rgba(250, 250, 250, 0.5);
  /* Layer_line */

  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  margin-bottom: 12px;
}

.el-row {
  padding: 24px 12px;
  background-color: #fff;

}

/* .el-row .el-col {} */

.div-popover {
  justify-content: center;
  display: inline-flex;
  height: 48px;
  line-height: 48px;
  margin-top: 12px;
  margin-bottom: 12px;
  margin-right: 12px;
}

.body-popover {
  display: inline-flex;
  height: 48px;
  justify-content: center;
  align-items: center;
}

.el-row .el-col .div {
  margin-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 85px;
}

.name {
  font-weight: 400;
  font-size: 14px;
}
</style>
